<!--  -->
<template>
  <div class="resetPass-container">
    <!-- 头部 -->
    <van-nav-bar title="找回密码" fixed :z-index="100" @click-left="onBack">
      <template #left>
        <van-icon name="arrow-left" size="20" color="#fff" />
      </template>
    </van-nav-bar>
    <div class="content">
      <div class="form-wrapper">
        <div class="user-tel">
          <input
            type="tel"
            placeholder="请输入手机号"
            v-model="userTel"
            maxlength="11"
          />
        </div>
        <div class="user-pwd">
          <input
            type="password"
            placeholder="请输入新密码"
            v-model="userPwd"
            maxlength="16"
          />
        </div>
        <div class="login-btn" @click="resetPwd">重置密码</div>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar, Icon, Toast } from "vant";
import { resetPassword } from "@/network/back/api";
export default {
  data() {
    return {
      //电话号码
      userTel: "",
      //登录密码
      userPwd: "",
      //校验规则
      rules: {
        userTel: {
          reg: /^1[35789]\d{9}$/,
          toast: "请输入11位合法的手机号",
        },
        userPwd: {
          reg: /^\w{6,16}$/,
          toast: "密码必须为6到16位数字，字母，下划线组成",
        },
      },
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    //返回上一页
    onBack() {
      this.$router.back();
    },

    //校验规则
    validate(field) {
      if (!this.rules[field].reg.test(this[field])) {
        this.$toast(this.rules[field].toast);
        return false;
      } else {
        return true;
      }
    },
    //重置密码
    async resetPwd() {
      if (this.validate("userTel") && this.validate("userPwd")) {
        try {
          const res = await resetPassword({
            url: "/resetPassword",
            method: "POST",
            data: {
              telephone: this.userTel,
              password: this.userPwd,
            },
          });
          this.$toast(res.message);
          if (res.data) {
            this.$router.push({ name: "PwdLogin" });
          } else {
            setTimeout(() => {
              this.userTel = "";
              this.userPwd = "";
            }, 1000);
          }
        } catch (err) {
          console.log(err);
        }
      }
    },
  },
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.resetPass-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}
.resetPass-container >>> .van-nav-bar__content {
  background-color: #b64f4a;
}
.resetPass-container >>> .van-nav-bar__title {
  color: #fff;
}
.content {
  flex: 1;
  padding-top: 46px;
}
.form-wrapper {
  padding: 20px;
}
.user-tel,
.user-pwd {
  display: flex;
  align-items: center;
  height: 44px;
  background-color: #fff;
  margin-bottom: 20px;
  border: 1px solid #ccc;
}
.form-wrapper input {
  font-size: 14px;
  padding-left: 10px;
}
.form-wrapper .login-btn {
  height: 44px;
  margin-bottom: 20px;
  color: #fff;
  text-align: center;
  line-height: 44px;
  background-color: #b64f4a;
}
</style>